<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04style绑定</title>
</head>

<body>
    <h2>style绑定</h2>
    <main id="app">
        <div :style="style">我是一个div1</div>
        <div :style="{color: style.color,border: '1px solid','border-color': style['border-color']}">我是一个div2</div>
    </main>
</body>
<script src="../vue.js"></script>
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            style: {
                color: "#ff0000",
                borderStyle: "solid",
                borderWidth: "1px",
                "border-color": "#ff0000"
            },
        },
    })

    let arr = ["#ff0000","#00ff00","#0000ff"];
    index = 1;
    setInterval(() => {
        vue.style.color = arr[index];
        vue.style["border-color"] = arr[index];
        index ++;
        if (index >= arr.length) {
            index = 0;
        }
    },1000)
</script>

</html>